import React, { useState, useEffect } from 'react';

const Case3: React.FC = () => {
  const [num, setNum] = useState(0);

  const handle = () => {
    //函数式更新：使用了一个函数来获取最新的状态值并返回更新后的状态。即使你连续调用三次，每次调用都会基于前一次更新后的状态值来计算新值。这样，即使这些调用是在同一个同步过程中发生的，每次调用也能得到前一次调用计算后的结果。
    setNum((num) => num + 1); //num:1
    setNum((num) => num + 1); //num:2
    setNum((num) => num + 1); //num:3
    console.log('点击事件里面的num', num); //num:0
  };
  console.log('num', num); //3
  /*
  点击一次按钮=>执行handle事件
  点击事件里面的num,打印为0?
  是因为setNum()这个方法是异步的,根据批处理会把所有的setState操作会先加入到更新队列中.等事件处理结束后,将三个更新合并为一个更新.此时num的值引用的还是useState初始的num值。所以在handle事件里面打印的num是0.
  但React在事件处理结束后,将这三个更新合并为一个更新,将num的值增加3
  所以外面console.log打印的num值是批处理之后的值。
  */

  return (
    <>
      <div>num:{num}</div>
      <button onClick={handle}>点击+1</button>
    </>
  );
};
export default Case3;
